<template>
<div class="content-box search_form">
    <heading grade="1">{{title}}</heading>
    <el-form v-bind="getFormProps()" label-width="80px">
      <el-row>
        <el-col :span="9">
          <el-form-item label="报名时间">
            <el-date-picker
              v-model="form.signTime"
              type="daterange"
              :editable="false"
              align="right"
              placeholder="请选择报名开始结束时间"
              style="width:100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="上课时间">
            <el-date-picker
              v-model="form.classTime"
              type="daterange"
              :editable="false"
              align="right"
              placeholder="请选择上课开始结束时间"
              style="width:100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label-width="10px">
            <el-button type="primary" class="search-btn" native-type="submit">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="课程教练">
            <el-select v-model="form.coach" clearable value-key="id" placeholder="请选择教练" style="width: 100%;">
              <el-option v-for="item in train_teacher_list" :key="item.id" :label="item.teacherName" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" label-width="25px">
            <el-input v-model="form.keyword" placeholder="请输入搜索内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="课程性质">
        <el-checkbox-group v-model="form.classNature">
          <el-checkbox label="0" name="type">专业课</el-checkbox>
          <el-checkbox label="1" name="type">综合课</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="课程状态">
        <el-checkbox-group v-model="form.classState">
          <el-checkbox label="4" name="type">仓库中</el-checkbox>
          <el-checkbox label="1" name="type">审核中</el-checkbox>
          <el-checkbox label="2" name="type">审核不通过</el-checkbox>
          <el-checkbox label="3" name="type">审核通过</el-checkbox>
          <el-checkbox label="5" name="type">进行中</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <!--tableList-->
    <div class="table_list">
      <el-table
        :data="train_currilum_list.list"
        stripe
        @sort-change="handelOrder"
        style="width: 834px">
        <el-table-column
          label="课程名称"
          :show-overflow-tooltip="true"
          width="200">
          <template scope="scope">
            <router-link :to="{name: 'detail', params: {serviceId: scope.row.goodsCode}}" target="_blank" class="alink_color">{{ scope.row.courseName }}<span class="state_green" v-if="scope.row.properties == 1">综</span><span class="state_sred" v-else>专</span></router-link>
            <span class="cstate_text">
              <span v-if="scope.row.auditStatus == 0">草稿</span>
              <span v-if="scope.row.auditStatus == 1">审核中</span>
              <span v-if="scope.row.auditStatus == 2">审核不通过</span>
              <span v-if="scope.row.auditStatus == 3">审核通过</span>
              <span v-if="scope.row.auditStatus == 4">仓库中</span>
              <span v-if="scope.row.auditStatus == 5">进行中</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="报名时间"
          align="center"
          :show-overflow-tooltip="true"
          width="98">
          <template scope="scope">
            <p v-if="!(scope.row.startBuyTime  && scope.row.endBuyTime)">随时</p>
            <div v-else class="time_text">
              <p>{{scope.row.startBuyTime | FormatDate('yyyy.MM.dd')}}</p>
              <p>-</p>
              <p>{{scope.row.endBuyTime | FormatDate('yyyy.MM.dd')}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="上课时间"
          align="center"
          :show-overflow-tooltip="true"
          width="98">
          <template scope="scope">
            <p v-if="!(scope.row.startClassTime && scope.row.endClassTime)">随时</p>
            <div v-else class="time_text">
              <p>{{scope.row.startClassTime | FormatDate('yyyy.MM.dd')}}</p>
              <p>-</p>
              <p>{{scope.row.endClassTime | FormatDate('yyyy.MM.dd')}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          align="center"
          label="上课周期"
          width="98">
          <template scope="scope">{{scope.row.classCycle | getWeekList}}</template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          sortable
          label="发布时间"
          prop="publishTime"
          align="center"
          width="98">
          <template scope="scope">{{scope.row.publishTime | FormatDate('yyyy.MM.dd')}}</template>
        </el-table-column>
        <el-table-column
          prop="teacherName"
          :show-overflow-tooltip="true"
          align="center"
          label="教练"
          width="80">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="报名总人数"
          align="center"
          width="90">
          <template scope="scope">{{scope.row.enrollCount ? scope.row.enrollCount : 0}}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="70">
          <template scope="scope">
            <p><el-button @click="handleShow(scope.row.courseId, scope.row.auditStatus, scope.row.properties)" type="text" size="small">详情</el-button></p>
            <!-- <p><el-button @click="handleDelete" type="text" size="small" v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 2">删除</el-button></p> -->
            <!-- <p><el-button @click="handleClick" type="text" size="small"  v-if="scope.row.auditStatus == 2">重新发布</el-button></p> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <el-pagination
      v-bind="getPaginationProps(train_currilum_list)"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      train_currilum_list: 'train_currilum_list',
      train_teacher_list: 'train_teacher_list'
    })
  },
  watch: {
    'form.signTime' (value) {
      if (value && value[0]) {
        this.query.startBuyTime = value[0].getTime()
        this.query.endBuyTime = value[1].getTime()
      } else {
        this.query.startBuyTime = ''
        this.query.endBuyTime = ''
      }
    },
    'form.classTime' (value) {
      if (value && value[0]) {
        this.query.startClassTime = value[0].getTime()
        this.query.endClassTime = value[1].getTime()
      } else {
        this.query.startClassTime = ''
        this.query.endClassTime = ''
      }
    },
    'form.coach' (value) {
      this.query.teacherId = value.id
      this.query.teacherName = value.teacherName
    },
    'form.keyword' (value) {
      this.query.name = value
    },
    'form.classNature' (value) {
      this.query.courseNature = value.join()
    },
    'form.classState' (value) {
      this.query.courseStatus = value.join()
    }
  },
  created () {
    this.form.signTime = this.query.startBuyTime ? [new Date(Number(this.query.startBuyTime)), new Date(Number(this.query.endBuyTime))] : []
    this.form.classTime = this.query.startClassTime ? [new Date(Number(this.query.startClassTime)), new Date(Number(this.query.endClassTime))] : []
    this.form.coach = {
      id: this.query.teacherId ? Number(this.query.teacherId) : '',
      teacherName: this.query.teacherName ? this.query.teacherName : ''
    }
    this.form.keyword = this.query.name
    this.form.classNature = this.query.courseNature ? this.query.courseNature.split(',') : []
    this.form.classState = this.query.courseStatus ? this.query.courseStatus.split(',') : []
    this.$store.dispatch('train_teacher_list')
  },
  data () {
    return {
      title: '课程管理',
      query: this.getQuery(),
      form: {
        signTime: [],
        classTime: '',
        keyword: '',
        coach: '',
        classNature: [],
        classState: []
      }
    }
  },
  methods: {
    fetch (query) {
      this.$store.dispatch('train_currilum_list', query)
    },
    handleShow (id, state, classType) { // 查看详情
      this.$router.push({path: '/training/curriculum/detail', query: {'id': id, 'state': state, 'classtype': classType}})
    },
    handelOrder (column) { // 排序
      let orderStr = ''
      if (column.order === 'ascending') {
        orderStr = 'asc'
      } else if (column.order === 'descending') {
        orderStr = 'desc'
      } else {
        orderStr = ''
      }
      this.query.sort = column.prop === 'publishTime' ? 'publish_time' : ''
      this.query.order = orderStr
      this.fetch(this.query)
    }
  }
}
</script>
<style lang="scss">
.table_list{
  margin-top:30px;
  .placeholder-text{
    margin-top:30px !important;
  }
  .cell{
    font-size:12px;
    padding:0 10px;
  }
  td{
    position: relative;
    .cstate_text{
      position: absolute;
      bottom:0;
      left:9px;
      height:14px;
      line-height:14px;
      color:#ccc;
    }
    .statr_red{
      color:#f30;
    }
    .statr_gren{
      color:#979797;
    }
  }
  .el-table{
    .time_text{
      margin:9px 0;
      p{
        line-height:14px;
        height:14px;
      }
    }
    .state_green{
      display: inline-block;
      position: absolute;
      right:0;
      top:50%;
      margin-top:-8px;
      background:#0ab885;
      color:#fff;
      height:16px;
      width:16px;
      line-height: 16px;
      text-align: center;
      margin-left: 3px;
    }
    .state_sred{
      display: inline-block;
      position: absolute;
      right:0;
      top:50%;
      margin-top:-8px;
      background:#ff6465;
      color:#fff;
      height:16px;
      width:16px;
      line-height: 16px;
      text-align: center;
      margin-left: 3px;
    }
  }
  .logo{
    width:40px;
    height:30px;
  }
  .el-button--text,.alink_color{
    color:#2a82ee;
  }
}
</style>
